<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>我的购物车</title>
    <link rel="stylesheet" href="../../lib/css/reset.min.css">
    <link rel="stylesheet" href="../../lib/css/animate.min.css">
    <link rel="stylesheet" href="../../css/all.min.css">

    <link rel="stylesheet" href="../../lib/css/elementui.min.css">
    <link rel="stylesheet" href="../../lib/css/fonts/element-icons.ttf">
    <link rel="stylesheet" href="../../lib/css/fonts/element-icons.woff">

</head>

<body>
    <div class="app-wrap" v-cloak id="myCart">
        <header-top></header-top>
        <div class="cart-table container">
            <!-- 顶部全选 -->
            <div class="top-bar">
                <div class="top-bar-item all">
                    <input type="checkbox"  v-model="allCheckeds" @click="allChecked"   name="" id="checkAll" class="checkBox mr-8">
                    <label for="checkAll">全选</label>
                </div>
                <div class="top-bar-item info">
                    <label>商品信息</label>
                </div>
                <div class="top-bar-item unitPrice">
                    <label>单价</label>
                </div>
                <div class="top-bar-item num">
                    <label>数量</label>
                </div>
                <div class="top-bar-item totalPrice">
                    <label>金额</label>
                </div>
                <div class="top-bar-item handle">
                    <label>操作</label>
                </div>
            </div>
            <!-- table body -->
            <div class="table-body">
                <div class="c-shopList" v-for="(shop,sindex) in shopList">
                    <div class="hd">
                        <div class="hd-item">
                            <input type="checkbox" v-model="shop.shopChecked" @click="changeShopProducts(sindex)" name="" :id="shop.shopId" class="checkBox mr-8">
                            <label :for="shop.shopId">{{shop.shopName}}</label>
                        </div>
                        <div class="hd-item ml-50" >
                            <span class="coupon" @click="getCouponList(shop.sellerId)">优惠券<i class="coupon-arrow"></i></span>
                            <el-dialog title="领取优惠券" :visible.sync="dialogTableVisible">
                                <el-table :data="couponInfo" v-if="couponInfo">
                                    <el-table-column property="couponName" label="优惠券名称" width="150"></el-table-column>
                                    <el-table-column property="startTime" label="	开始时间" width="200"></el-table-column>
                                    <el-table-column property="endTime" label="结束时间"></el-table-column>
                                    <el-table-column label="操作">
                                        <template slot-scope="scope">
                                            <el-button
                                                    size="mini"
                                                    @click="couponEdit(scope.row,shop.sellerId)">领取</el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </el-dialog>
                        </div>
                    </div>

                    <div class="bd">
                        <div class="bd-item" v-for="(pro,index) in shop.productList">
                            <input type="checkbox"  v-model="pro.productChecked" @click="changeProducts(sindex,index)" name="" class="checkBox mr-8">
                            <div class="pro-img" style="overflow: hidden">
                                <img :src="pro.picImg" alt="">
                            </div>
                            <div class="pro-name">
                                <p>{{pro.name}}</p>
                                <span class="tag" :style="{background:pro.tagColor}">{{pro.tag}}</span>
                            </div>
                            <div class="pro-property">
                                <!--更改颜色尺寸-->
                                <el-dialog title="修改信息" :visible.sync="dialogFormVisible">
                                    <!--修改信息form表单-->
                                    <el-row><el-col :span="16"><div class="grid-content bg-purple">
                                        <div class="right-color">
                                            <h2>颜 色</h2>
                                            <div class="right-color-right">
                                                <div class="check-group" v-for="(item,index) in productColorAndSize"  >
                                                    <span class="check-item" :class="{'active':index == productColorIndex}" @click="clickColor(index)">{{item.colorName}}</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="right-size">
                                          <h2>尺 码</h2>
                                            <div class="right-color-right" >
                                              <div class="check-group" v-for="(item,index) in productSize" >
                                                  <span class="check-item" :class="{'active':index == productSizeIndex}" @click="clickSize(index)">{{item.name}}</span>
                                              </div>
                                          </div>
                                      </div>
                                  </div>
                                    </el-col>
                                        <el-col :span="8"><div class="grid-content bg-purple">
                                            <img :src="productColorAndSize[productColorIndex].colorCoverPic" width="100%"/>
                                        </div></el-col></el-row>
                                    <div slot="footer" class="dialog-footer">
                                        <el-button @click="dialogFormVisible = false">取 消</el-button>
                                        <el-button type="primary" @click="updateShoppingcat">确 定</el-button>
                                    </div>
                                </el-dialog>
                                <div class="change-box">
                                    <span class="change-btn"  @click="updateSpec(pro)">修改</span>
                                </div>
                                <p class="brief" >
                                    颜色:{{pro.colorName}}
                                </p>
                                <p class="brief" >
                                    尺码:{{pro.sizeName}}
                                </p>
                            </div>
                            <div class="pro-unitPrice">
                                <span>￥{{pro.productPrice}}</span>
                            </div>
                            <div class="pro-num">
                                <counter :buynum="pro.buyNumber" :pdix="index" :spix="sindex" @callback="getBuyNumber" @updateCartCount="updateCat"></counter>
                            </div>
                            <div class="pro-totalPrice">
                                <span >{{pro.productPrice*pro.buyNumber | keepTwoNum}}</span>
                            </div>
                            <div class="pro-handle">
                                <span>
                                    <a href="javascript:void(0)" @click="addProductFollow(sindex,index,pro.productNumber,pro.cartId)" >移入收藏夹</a>
                                </span>
                                <span>
                                    <a href="javascript:void(0)" @click="deleteProduct(sindex,index,pro.cartId)" >删除</a>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <!-- 购物车表单底部 -->
        <div class="cart-tableFt">
            <div class="item-list container">
                <div class="item-list-left">
                    <div class="item item-all">
                        <input type="checkbox" v-model="allCheckeds" @click="allChecked" name="" id="checkAll1" class="checkBox mr-8">
                        <label for="checkAll1">全选</label>
                    </div>
                    <div class="item item-remove">
                        <a href="javascript:void(0)" @click="deleteAllProduct()" >删除所有商品</a>
                    </div>
                    <div class="item item-addLove">
                        <span>
                             <a href="javascript:void(0)" @click="addAllProductFollow()" >移入收藏夹</a>
                        </span>
                    </div>
                </div>
                <div class="item-list-right">
                    <div class="item item-sel">
                        <span>已选商品<b>{{allBuyNum}}</b>件</span>
                    </div>
                    <div class="item item-total">
                        <span>合计：<b>{{allBuyPrice.toFixed(2)}}</b></span>
                    </div>
                    <div class="item item-submit">
                        <span @click="goPay()">去结算</span>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <script src="../../lib/js/vue.js"></script>
    <script src="../../lib/js/axios.min.js"></script>
    <!-- mock 数据 打包发布的时候记得移除 -->
    <script src="../../lib/js/mock.js"></script>
    <script src="../../js/all.min.js"></script>
    <script src="../../lib/js/elementui.min.js"></script>
    <script>
        myCart();
    </script>
</body>

</html>